<template>
  <!-- 添加员工页面 -->
  <div class="fillcontain">
    <!-- 添加 -->
     <div class="searchArea">
      <el-form size="mini" :inline="true">
        <el-form-item label="姓名">
          <el-input 
            v-model="name" 
            placeholder="请输入" 
            clearable 
            @clear="resetData()">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="success" 
            icon="el-icon-search"
            @click="searchEmp()"
            >查询
          </el-button>
          <el-button 
            type="primary" 
            icon="el-icon-plus"
            @click="addEmployee()"
            >添加员工
           </el-button>
        </el-form-item>
      </el-form>
     </div>
    <!-- 员工表格 -->
    <div class="table_container">
      <el-table
        border
        v-loading="loading"
        size="mini"
        element-loading-text = "数据正在加载中..."
        element-loading-spinner = "el-icon-loading"
        :data="empList"
        style="width: 100%"
        align="center">
        <el-table-column
          prop="account"
          label="工号"
          align="center"
          width="140"
          sortable>
        </el-table-column>
        <el-table-column
          label="名字"
          align="center"
          width="140">
          <template slot-scope="scope">
            <span class="shenlan">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="framework"
          label="组织架构"
          align="center"
          width="140">
        </el-table-column>
        <el-table-column
          prop="role_id"
          label="角色名称"
          align="center"
          width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.role_id===1">系统管理员</span>
            <span v-else-if="scope.row.role_id===2">操作管理员</span>
            <span v-else>操作员</span>
          </template>
        </el-table-column>
        <el-table-column 
          prop="time" 
          label="创建时间" 
          align="center"
          sortable>
          <template slot-scope="scope">
            <el-icon name="time"></el-icon>
            {{scope.row.time}}
          </template>
        </el-table-column>
        <el-table-column 
          prop="modify" 
          label="最后一次修改时间" 
          align="center"
          sortable>
          <template slot-scope="scope">
            <el-icon name="time"></el-icon>
            {{scope.row.modify}}
          </template>
        </el-table-column>
        <el-table-column 
          align="center" 
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button 
              type="warning" 
              size="mini" 
              @click="onEditEmp(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <pagination
        :paginations="paginations"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
      ></pagination>
    </div>
    <!-- 添加员工对话框 -->
    <emp-dialog
      v-if="empDialog.show"
      :isShow="empDialog.show"
      :dialogRow="empDialog.dialogRow"
      :title="empDialog.title"
      @closeDialog="hideEmpDialog"
      @getEmpList="getDataList"
    ></emp-dialog>
  </div>
</template>

<script>

import { getEemList } from "@/api/emp.js";
import Pagination from "@/components/pagination";
import EmpDialog from "./childComps/EmpDialog.vue";

export default {
  name: "Employee",
  components: {
    Pagination,
    EmpDialog,
  },
  data() {
    return {
      isShow: false, 
      empList: [],
      loading: false,
      name:null,
      paginations: {
        index: 1, // 当前位于哪页
        size: 10, // 1页显示多少条
        pageSizes: [8, 10, 15,20], //每页显示多少条
        pageTotal: 0, //总记录条数
      },
      empDialog: {
        show: false,
        dialogRow: {},
        title:''
      },
    };
  },
  created() {
    //获取员工列表
    this.getDataList();
  },
  methods: {
    //获取员工列表
    async getDataList() {
      this.loading=true
      let params = {
        index: this.paginations.index,
        size: this.paginations.size,
      };
       const res= await getEemList(params)
        this.empList = res.data
        this.paginations.pageTotal=res.count      
        this.loading=false
    },
    //添加员工
    addEmployee() {
      this.empDialog.title="添加员工信息"
      this.empDialog.show = true;
    },
    async searchEmp(){
        this.loading=true
       const {data}= await getEemList({name:this.name})
        this.empList = data;   
        this.loading=false
    },
    //修改员工
    async onEditEmp(row) {
       this.empDialog.dialogRow = row;
       this.empDialog.title="修改员工信息"
       this.empDialog.show = true;
    },
    //清空
    resetData(){
      this.name=null
      this.paginations.index=1
      this.getDataList()
    },
      //关闭对话框
     hideEmpDialog() {
      this.empDialog.show = false;
    },
    //上下分页
    handleCurrentChange(newPage) {
      // 当前页码发生改变
      this.paginations.index = newPage;
      //重新请求刷新列表
      this.getDataList();
    },
    //每页显示多少条
    handleSizeChange(newCount) {
      this.paginations.size = newCount;
      //重新请求刷新列表
      this.getDataList();
    },
  },
};
</script>

<style lang="scss" scoped></style>
